<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<header th:replace="admin/header::header-fragment"></header>
<body class="hold-transition sidebar-mini">
<link rel="stylesheet" type="text/css" th:href="@{/admin/skucss/index.css}"/>
<!-- Bootstrap 4 -->
<link rel="stylesheet" type="text/css" th:href="@{/admin/plugins/bootstrap/css/bootstrap.css}"/>
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
<div class="wrapper">
    <!-- 引入页面头header-fragment -->
    <div th:replace="admin/header::header-nav"></div>
    <!-- 引入工具栏sidebar-fragment -->
    <div th:replace="admin/sidebar::sidebar-fragment(${path})"></div>
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid">
            </div><!-- /.container-fluid -->
        </div>
        <!-- Main content -->
        <div class="content">
            <div class="container-fluid">
                <div class="card card-primary card-outline">
                    <div class="card-header">
                        <h3 class="card-title">商品信息编辑</h3>
                    </div>
                    <div class="card-body">
                        <form id="goodsForm" onsubmit="return false;">
                            <div class="form-group" style="display: flex">
                                <div>请选择分类:</div>
                                <div style="display: flex;flex-wrap: wrap;">
                                    <p>
                                        <th:block th:unless="${null == thirdLevelCategories}">
                                            <th:block th:each="c : ${thirdLevelCategories}">
                                        <input style="display: inline-block;vertical-align: middle;margin-bottom: 10px; margin-left: 100px;" type="checkbox" th:id="${c.categoryId}" th:value="${c.categoryId}"
                                               name="checkGoodsCategory" th:attr ="checked=${#lists.contains(checkGoodsCategory,c.categoryId)?true:false}">
                                        <label style="cursor: pointer;" th:for="${c.categoryId}" th:text="${c.categoryName}"></label>
                                            </th:block>
                                        </th:block>
                                    </p>
                                </div>
                                <!--<select class="form-control col-sm-3" id="levelOne"
                                        data-placeholder="请选择分类...">
                                    <th:block th:unless="${null == firstLevelCategories}">
                                        <th:block th:each="c : ${firstLevelCategories}">
                                            <option th:value="${c.categoryId}" th:text="${c.categoryName}"
                                                    th:selected="${null !=firstLevelCategoryId and firstLevelCategoryId==c.categoryId} ?true:false">
                                            </option>
                                        </th:block>
                                    </th:block>
                                </select>&nbsp;
                                <select class="form-control col-sm-3"
                                        id="levelTwo"
                                        data-placeholder="请选择分类...">
                                    <th:block th:unless="${null == secondLevelCategories}">
                                        <th:block th:each="c : ${secondLevelCategories}">
                                            <option th:value="${c.categoryId}" th:text="${c.categoryName}"
                                                    th:selected="${null !=secondLevelCategoryId and secondLevelCategoryId==c.categoryId} ?true:false">
                                            </option>
                                        </th:block>
                                    </th:block>
                                </select>
                                <select class="form-control col-sm-3"
                                        id="levelThree"
                                        data-placeholder="请选择分类...">
                                    <th:block th:unless="${null == thirdLevelCategories}">
                                        <th:block th:each="c : ${thirdLevelCategories}">
                                            <option th:value="${c.categoryId}" th:text="${c.categoryName}"
                                                    th:selected="${null !=thirdLevelCategoryId and thirdLevelCategoryId==c.categoryId} ?true:false">
                                            </option>
                                        </th:block>
                                    </th:block>
                                </select>-->

                            </div>
                            <div class="form-group" style="width: 100%;float: left;">
                                <input type="hidden" id="goodsId" name="goodsId"
                                       th:value="${goods!=null and goods.goodsId!=null }?${goods.goodsId}: 0">
                                <input type="text" class="form-control col-sm-6" id="goodsName" name="goodsName"
                                       placeholder="*请输入商品名称(必填)" style="width: 40%;float: left;"
                                       th:value="${goods!=null and goods.goodsName!=null }?${goods.goodsName}: ''"
                                       required="true">
                                &nbsp;&nbsp;
                                <input type="text" class="form-control col-sm-6" id="goodsIntro" name="goodsIntro"
                                       placeholder="*请输入商品简介(100字以内)" style="width: 40%;float: left;margin-left: 40px;"
                                       th:value="${goods!=null and goods.goodsIntro!=null }?${goods.goodsIntro}: ''"
                                       required="true">
                            </div>
                            <div class="form-group" style="width: 100%;float: left;">
                                <!--<input type="number" class="form-control col-sm-6" id="originalPrice"
                                       name="originalPrice"
                                       placeholder="*请输入商品价格"
                                       style="width: 40%;float: left;"
                                       th:value="${goods!=null and goods.originalPrice!=null }?${goods.originalPrice}: 1"
                                       required="true">-->
                                &nbsp;&nbsp;
                                <input type="number" class="form-control col-sm-6" id="sellingPrice"
                                       name="sellingPrice"
                                       placeholder="*请输入商品售卖价"
                                       style="width: 40%;float: left;margin-left: 0px;"
                                       th:value="${goods!=null and goods.sellingPrice!=null }?${goods.sellingPrice}: ''"
                                       required="true">
                                <input type="text" class="form-control col-sm-6" id="tag" name="tag"
                                       style="width: 40%;float: left;margin-left: 40px;"
                                       placeholder="*请输入商品小标签"
                                       th:value="${goods!=null and goods.tag!=null }?${goods.tag}: ''"
                                       required="true">
                            </div>
                            <!--sku开始-->

                            <table id="skuTable">
                                <button type="button" class="btn btn-primary" data-target="#addSkuDialog"
                                        style="margin-bottom: 20px;float: left;"
                                        data-toggle="modal">新增
                                </button>

                            </table>
                            <!-- Modal -->
                            <div class="modal fade" id="addSkuDialog" tabindex="-1" role="dialog"
                                 aria-labelledby="exampleModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                        </div>
                                        <div class="modal-body">
                                            <label>
                                                <input id="checkAll" name="checkAll" type="checkbox"
                                                       readonly><span></span></label>
                                            <div class="form-group">
                                                <label for="goodsColor">颜色</label>
                                                <input type="text" class="form-control" id="goodsColor"
                                                       aria-describedby="emailHelp">
                                            </div>
                                            <div class="form-group">
                                                <label for="goodsSize">尺寸</label>
                                                <input type="text" class="form-control" id="goodsSize">
                                            </div>
                                            <div class="form-group">
                                                <label for="goodsSellingPrice">原价</label>
                                                <input type="text" class="form-control" id="goodsSellingPrice">
                                            </div>
                                            <div class="form-group">
                                                <label for="discountPrice">折扣价</label>
                                                <input type="text" class="form-control" id="discountPrice">
                                            </div>
                                            <div class="form-group">
                                                <label for="goodsStock">库存</label>
                                                <input type="text" class="form-control" id="goodsStock">
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭
                                            </button>
                                            <button type="button" class="btn btn-primary" onclick="skuIdAdd()">保存
                                                changes
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--sku结束-->

                            <div class="form-group">
                                <label class="control-label">上架状态:&nbsp;</label>
                                <input name="goodsSellStatus" type="radio" id="goodsSellStatusTrue" checked=true
                                       th:checked="${null==goods||(null !=goods and null !=goods.goodsSellStatus and goods.goodsSellStatus==0)} ?true:false"
                                       value="0"/>&nbsp;上架&nbsp;
                                <input name="goodsSellStatus" type="radio" id="goodsSellStatusFalse" value="1"
                                       th:checked="${null !=goods and null !=goods.goodsSellStatus and goods.goodsSellStatus==1} ?true:false"/>&nbsp;下架&nbsp;
                            </div>
                            <div class="form-group">
                                <div class="form-group">
                                    <div class="col-sm-4">
                                        <th:block th:if="${null == goods}">
                                            <img id="goodsCoverImg" src="/admin/dist/img/img-upload.png"
                                                 style="height: 64px;width: 64px;">
                                        </th:block>
                                        <th:block th:unless="${null == goods}">
                                            <img id="goodsCoverImg" th:src="${goods.goodsCoverImg}"
                                                 style="width:160px ;height: 160px;display:block;">
                                        </th:block>
                                    </div>
                                </div>
                                <br>
                                <div class="form-group">
                                    <div class="col-sm-4">
                                        <button class="btn btn-info" style="margin-bottom: 5px;"
                                                id="uploadGoodsCoverImg">
                                            <i class="fa fa-picture-o"></i>&nbsp;上传商品主图
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group" id="wangEditor"
                                 th:utext="${goods!=null and goods.goodsDetailContent !=null}?${goods.goodsDetailContent}: ''">
                            </div>
                            <div class="form-group">
                                <!-- 按钮 -->
                                &nbsp;<button class="btn btn-info float-right" style="margin-left: 5px;"
                                              id="saveButton">保存商品
                            </button>&nbsp;
                                &nbsp;<button class="btn btn-secondary float-right" style="margin-left: 5px;"
                                              id="cancelButton">返回商品列表
                            </button>&nbsp;
                            </div>
                        </form>
                    </div>

                </div>
            </div><!-- /.container-fluid -->
        </div>
    </div>
    <!-- /.content-wrapper -->
    <!-- 引入页脚footer-fragment -->
    <div th:replace="admin/footer::footer-fragment"></div>
</div>
<label id="hiddenSku" style="display: none" th:text="${goodsSku}"></label>

<!-- jQuery -->
<script th:src="@{/admin/plugins/jquery/jquery.min.js}"></script>

<!-- jQuery UI 1.11.4 -->
<script th:src="@{/admin/plugins/jQueryUI/jquery-ui.min.js}"></script>
<!-- Bootstrap 4 -->
<script th:src="@{/admin/plugins/bootstrap/js/bootstrap.bundle.min.js}"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>
<!-- Latest compiled and minified Locales -->
<script src="https://unpkg.com/bootstrap-table@1.15.3/dist/locale/bootstrap-table-zh-CN.min.js"></script>
<!-- AdminLTE App -->
<script th:src="@{/admin/dist/js/adminlte.min.js}"></script>
<!-- sweetalert -->
<script th:src="@{/admin/plugins/sweetalert/sweetalert.min.js}"></script>
<!-- ajaxupload -->
<script th:src="@{/admin/plugins/ajaxupload/ajaxupload.js}"></script>
<!-- wangEditor -->
<script type="text/javascript" src="https://unpkg.com/wangeditor/dist/wangEditor.min.js"></script>

<script th:src="@{/admin/dist/js/public.js}"></script>
<script th:src="@{/admin/dist/js/newbee_mall_goods_edit.js}"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>
<!-- Latest compiled and minified Locales -->
<script src="https://unpkg.com/bootstrap-table@1.15.3/dist/locale/bootstrap-table-zh-CN.min.js"></script>
</body>
</html>